<template>
  <div class="search-container">
    <a-input-search class="search" placeholder="输入内容以搜索" search-button @search="search"/>
  </div>
  <a-button style="margin-left: 20px" status="danger" @click="deleteBatchUser">删除</a-button>
  <a-table
      style="padding: 20px"
      row-key="id"
      :data="data"
      :row-selection="rowSelection"
      v-model:selectedKeys="selectedKeys"
      :pagination="false"
      :page-position="'bottom'"
      :stripe="true"
  >
    <template #columns>
      <a-table-column title="用户头像" align="center">
        <template #cell="{record}">
          <a-avatar shape="square" :image-url="record.userAvatar!=null?record.userAvatar:'https://stone-answer-bucket-1328818493.cos.ap-chengdu.myqcloud.com/user_avatar/default_avatar.png'" :size="32" />
        </template>
      </a-table-column>
      <a-table-column title="用户账号" data-index="userAccount" align="center"></a-table-column>
      <a-table-column title="用户昵称" data-index="userName" align="center"></a-table-column>
      <a-table-column title="用户简介" data-index="userProfile" align="center" :ellipsis="true" :tooltip="true"></a-table-column>
      <a-table-column title="用户角色" data-index="userRole" align="center"></a-table-column>
      <a-table-column title="创建时间" data-index="createTime" align="center"></a-table-column>
      <a-table-column title="更新时间" data-index="updateTime" align="center"></a-table-column>
      <a-table-column title="操作" align="center">
        <template #cell="{record}">
          <a-button style="margin-right: 5px" size="mini" status="danger" @click="deleteUser(record.id)">删除
          </a-button>
          <a-button size="mini" type="primary" @click="editUser(record.id)">修改</a-button>
        </template>
      </a-table-column>

    </template>
  </a-table>
  <div style="display: flex; justify-content: center; margin-top: 10px; margin-bottom: 10px;">
    <a-pagination
        :total="pageInfo.total"
        :current="pageInfo.current"
        :page-size="pageInfo.pageSize"
        show-jumper
        show-page-size
        @change="listUser"
        @page-size-change="changePageSize"
    />
  </div>
  <a-modal
      v-model:visible="confirmVisible"
      @ok="doDeleteUser"
      :closable="false"
  >
    <div style="text-align: center">
      确认删除？
    </div>
  </a-modal>
  <a-drawer :width="450" :visible="editVisible" @ok="doEditUser" @cancel="clearContent" unmountOnClose>
    <template #title>
      {{ editUserInfo.userName }}
    </template>
    用户名：<a-input v-model="editUserInfo.userName"/>
    角色：<a-input v-model="editUserInfo.userRole"/>
    用户简介：<a-input v-model="editUserInfo.userProfile"/>
    密码：<a-input v-model="inputPassword" type="password"/>
    <file-upload @onProgress="onProgress"></file-upload>
  </a-drawer>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {
  deleteUserUsingPost, getUserByIdUsingGet,
  listUserByPageUsingPost, updateUserUsingPost
} from "@/api/UserRequest";
import message from "@arco-design/web-vue/es/message";
import FileUpload from "@/components/FileUpload.vue";
import {uploadFileUsingPost} from "@/api/FileRequest";
// 用户列表
const data = ref([]);
// 选择的用户数据
const selectedKeys = ref([]);

// 管理员输入的用户密码
const inputPassword = ref("");

// 搜索框输入的内容
const inputContent = ref("")
// 选项框配置信息
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
});
// 分页配置信息
const pageInfo = ref({
  pageSize: 5,
  current: 1,
  total: 50
});

// 当前要删除的用户ID
let delUserId = ref(0);
// 提示框是否展示
let confirmVisible = ref(false);
// 修改框是否展示
let editVisible = ref(false);
// 当前正在修改的用户信息
let editUserInfo = ref({});

// 当前正在上传的用户头像
const file = ref();

// 获取用户信息
onMounted(async () => {
  await listUser(1);
})

// 获取用户信息的具体方法
async function listUser(current) {
  const result = await listUserByPageUsingPost({
    current: current,
    pageSize: pageInfo.value.pageSize,
    searchText: inputContent.value
  });
  pageInfo.value.current = current;
  pageInfo.value.total = result.data.data.total;
  data.value = result.data.data.records;
}

async function changePageSize(pageSize) {
  pageInfo.value.pageSize = pageSize;
  await listUser(pageInfo.value.current);
}

function search( content ) {
  inputContent.value = content;
  listUser(1);
}

function deleteBatchUser() {
  confirmVisible.value = true;
}

async function editUser(UserId) {
  const result = await getUserByIdUsingGet(UserId);
  editUserInfo.value = result.data.data;
  editVisible.value = true;
}

function deleteUser(id) {
  delUserId.value = id;
  confirmVisible.value = true;
}

// 进行删除操作
async function doDeleteUser() {
  if (delUserId.value !== 0) {
    await deleteUserUsingPost({
      id: delUserId.value
    });
    delUserId.value = 0;
  } else if (selectedKeys.value.length > 0) {
    await deleteUserUsingPost({
      ids: selectedKeys.value
    });
    selectedKeys.value = [];
  }
  await listUser(pageInfo.value.current);
}

// 进行更新操作
async function doEditUser() {
  if(file.value){
    const result = await uploadFileUsingPost(file.value , "user_avatar");
    editUserInfo.value.userAvatar = result.data.data;
  }
  editUserInfo.value.userPassword = inputPassword.value;
  await updateUserUsingPost(editUserInfo.value);
  await clearContent();
  await listUser(pageInfo.value.current);
  message.success("修改成功!")
}

// 清空弹窗中输入的内容
async function clearContent() {
  editVisible.value = false;
  editUserInfo.value = {};
}

function onProgress(currentFile){
  file.value = currentFile.file;
  console.log(currentFile.file);
}
</script>

<style scoped>
/* 搜索框样式 */
.search {
  width: 360px;
}

/* 搜索框容器样式 */
.search-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
</style>